<%
  var headContent = {
%>
<link rel="stylesheet" href="${base}/template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
<style type="text/css">
  /*验证：提示信息样式 begin*/
  .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
  /*附件上传*/
  .am-progress-xs {
    height: .2rem;
  }
  .am-progress {
    margin-bottom: 0;
  }
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<div class="am-cf am-padding">
  <div class="am-fl am-cf"> <strong class="am-text-primary am-text-lg" onclick="window.history.back(); return false;">APP版本管理</strong>
    /
    <small>APP版本编辑</small>
  </div>
</div>
<form id="form"  method="post" class="am-form" action="${base}/deviceversion/save">
  <input type="hidden" name="version.id" value="${version.id!}" />
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active">
        <a href="#tab1">APP版本详情信息</a>
      </li>
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-fade am-in am-active" id="tab1">
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">设备类型：</div>
          <div class="am-u-sm-6 am-u-md-6">
            <div class="am-btn-group" data-am-button>
              <button class="am-btn am-btn-default <%if(version.type! == 1){%>
                am-active
                <%}%>
                ">
                <input type="radio" name="version.type" value="1" <%if(version.type! == 1){%>
                checked
                <%}%>/> IOS苹果系统</button>
              <button class="am-btn am-btn-default <%if(version.type! == 2){%>
                am-active
                <%}%>
                ">
                <input type="radio" name="version.type" value="2" <%if(version.type! == 2){%>
                checked
                <%}%>/> Android系统</button>
            </div>
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">
            <span  style="color: red;">*</span>
            应用名称：
          </div>
          <div class="am-u-sm-6 am-u-md-6">
            <input class="am-input" type="text" id="appName" name="version.appName" value="${version.appName!}" placeholder="请输入应用名称" maxlength="50" required/>
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg">
            <div class="am-alert am-alert-danger"></div>
          </div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">
            <span  style="color: red;">*</span>
            版本号：
          </div>
          <div class="am-u-sm-6 am-u-md-6">
            <input type="text" class="am-input" pattern="^\d+$" placeholder="0" name="version.version" value="${version.version!}" maxlength="10" required/>
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">
            <span  style="color: red;">*</span>
            上传APP文件：
          </div>
          <div class="am-u-sm-6 am-u-md-6">
            <input type="text" id="downloadPath" name="version.downloadPath" maxlength="200"
              value="${version.downloadPath!""}"
              placeholder="请上传应用（ *.apk,*.ipa ）" required/>
          </div>
          <div class="am-u-sm-2 am-u-md-4">
            <div class="am-form-file am-text-xs">
              <button type="button" class="am-btn am-btn-primary am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
              </button>
              <input id="fileupload" type="file" name="files[]" multiple>
            </div>
            <!-- The global progress bar -->
            <div id="progress-area" class="am-margin-top-sm am-hide">
              <div id="progress-text" class="am-text-xs am-text-right"></div>
              <div class="am-progress am-progress-striped am-progress-sm am-active ">
                <div class="am-progress-bar am-progress-bar-secondary"  style="width: 100%"></div>
              </div>
              <!--
              <div id="progress" class="am-progress am-progress-xs">
                <div class="am-progress-bar" style="width: 0%"></div>
              </div>
              -->
            </div>
          </div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">APP文件名称：</div>
          <div class="am-u-sm-6 am-u-md-6">
            <input type="text" class="am-input" placeholder="APP文件名称" id="fileName" name="version.fileName" value="${version.fileName!}" maxlength="250" />
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">APP大小(KB)：</div>
          <div class="am-u-sm-6 am-u-md-6">
            <input type="text" class="am-input" placeholder="APP大小(KB)" id="fileSize" name="version.fileSize" value="${version.fileSize!}" maxlength="250" />
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">MD5值：</div>
          <div class="am-u-sm-6 am-u-md-6">
            <input type="text" class="am-input" placeholder="MD5值" id="md5" name="version.md5" value="${version.md5!}" maxlength="250" />
          </div>
          <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">是否发布：</div>
          <div class="am-u-sm-12 am-u-md-4 switch-button">
            <input id="ispublicSwtich" name="version.ispublicSwtich" type="checkbox" data-size='xs'
              data-am-switch data-off-text="否" data-on-text="是"<%if
            (version.ispublic! == null || version.ispublic! == 1){%>
            checked
            <%}%>
            />
            <small>*发布后才能在客户端进行升级</small>
            <input
              type="hidden" class="am-input-sm" name="version.ispublic" id="ispublic"
              value="${version.ispublic!1}" />
          </div>
          <div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
          <div class="am-u-sm-2 am-u-md-5 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">是否强制更新：</div>
          <div class="am-u-sm-12 am-u-md-4 switch-button">
            <input id="isForceUpdateSwitch" name="version.isForceUpdateSwitch" type="checkbox" data-size='xs'
              data-am-switch data-off-text="否" data-on-text="是"<%if
            (version.isForceUpdate! == null || version.isForceUpdate! == 1){%>
            checked
            <%}%>
            />
            <input
              type="hidden" class="am-input-sm" name="version.isForceUpdate" id="isForceUpdate"
              value="${version.isForceUpdate!1}" />
          </div>
          <div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
          <div class="am-u-sm-2 am-u-md-5 input-msg"></div>
        </div>
        <div class="am-g am-form-group am-margin-top">
          <div class="am-u-sm-4 am-u-md-2 am-text-right">版本功能描述：</div>
          <div class="am-u-sm-6 am-u-md-6">
            <textarea class="" rows="15" id="version.description" name="version.description">${version.description!}</textarea>
          </div>
          <div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="submit" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">返回上一级</button>
  </div>
</form>
<script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=2"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="${base}/template/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">
  $(function(){
    /*表单验证：begin*/
    //自定义规则
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.mobile = /^1((3|5|8){1}\d{1}|70)\d{8}$/;
    }
    $("#form").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      }
    });
    $("#ispublicSwtich").on('switchChange.bootstrapSwitch',function(event, state) {
      if (state.toString() == "true") {
        $("#ispublic").val("1");
      } else {
        $("#ispublic").val("0");
      }
    });
    $("#isForceUpdateSwitch").on('switchChange.bootstrapSwitch',function(event, state) {
      if (state.toString() == "true") {
        $("#isForceUpdate").val("1");
      } else {
        $("#isForceUpdate").val("0");
      }
    });
    /*表单验证：end*/
    /*附件上传：begin*/
    var jqXHR = $('#fileupload').fileupload({
      url: "${base}/upload/appFile/",
      dataType: 'json',
      start: function (e) {
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").removeClass("am-text-danger");
        $("#progress-text").html("");
        // $(".am-progress-bar").css("width","0%");
      },
      done: function (e, data) {
        console.log(data);
        var jo = data.result;
        if(jo.status == 'success'){
          $('#downloadPath').val(jo.url);
          $('#downloadPath').focus();
          $('#fileName').val(jo.fileName);
          $('#fileSize').val(jo.fileSize);
          $('#md5').val(jo.md5);
          $("#progress-text").html("上传成功!");
          setTimeout(function() {
            $("#progress-area").addClass("am-hide");
          },1500);
        }else{
          $("#progress-area").removeClass("am-hide");
          $("#progress-text").addClass("am-text-danger");
          $("#progress-text").html(jo.message);
          setTimeout(function() {
            $("#progress-area").addClass("am-hide");
          },2000);
        }
      },
      progressall: function (e, data) {
        // var progress = parseInt(data.loaded / data.total * 100, 10);
        // $(".am-progress-bar").css("width",progress + "%");
        // $("#progress-text").html(progress + "%");
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log("fileupload error！");
        alert('2');
        // console.log(jqXHR);
        // console.log(textStatus);
        // console.log(errorThrown);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("fileupload error！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");
        },2000);
      },
      fail: function (jqXHR, textStatus) {        
        console.log("fileupload fail！");
        // console.log(jqXHR);
        // console.log(textStatus);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("fileupload fail！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");
        },2000);
      }
    });
    /*附件上传：end*/
  });
</script>
<%}%>